<template>
<div class="container__">
    <scroll-view scroll-y="true" :scroll-into-view="target" :style="{height:height+'px'}">
        <div class="messageitem" :style="{'flex-flow':item.type==0?'row-reverse':'row'}" v-for="(item, index) in chatmessagelist" :key="index" :id="'msg-'+index">
            <div class="imgbox">
                <img v-if="item.type==1" :src="user.avatar" alt=""/> <img v-if="item.type==0" :src="my.avatar" alt=""/>
            </div>
            <div class="mesinfo">
                {{item.msg}}
            </div>
        </div>
    </scroll-view>

    <div class="sendmessagebox">
        <!-- <img @click="openkey" v-if="flag" src="/static/images/jianpan.png" alt="">
        <img @click="openkey" v-else src="/static/images/sendaudio.png" alt=""> -->
        <input v-if="!flag" :confirm-hold="true" 
        @input="input" @blur="blur" 
        :adjust-position="false" 
        :cursor-spacing="0" 
        v-model="iuputinfo" 
        placeholder="请输入" 
        @focus="focus" 
        @confirm="onConfirm" />
        <!-- <div v-else class="yuyin">请说话</div> -->
        <img src="/static/images/ic_send_out@2x.png" alt="" @click="onsend">
    </div>

    <van-toast id="van-toast" />
</div>
</template>

<script>
import Toast from '../../../static/dist/toast/toast';
import URL from "@/utils/host";
export default {
    data() {
        return {
            chatmessagelist: [],
            scrollTop: 0,
            flag: false,
            height: '',
            target: '',
            iuputinfo: '',
            windowHeight: '',
            soket: {},
            user: {},
            my: {},
            msg:null
        }
    },
    watch: {
        chatmessagelist(val) {
            this.target = 'msg-' + (val.length - 1)
            this.chatmessagelist = val
        }
    },
    methods: {
        onConfirm(e) {
            if (!e.mp.detail.value) return Toast('消息不能为空哦');
            
            wx.sendSocketMessage({
                data: JSON.stringify({
                    uid: this.my.id,
                    ruid: this.user.id,
                    cmd: 'chat',
                    msg:e.mp.detail.value
                })
            })
            this.msg = null
            this.iuputinfo=" "
        },
        onsend(){
            console.log(this.msg)
            if (!this.msg) return Toast('消息不能为空哦');
            wx.sendSocketMessage({
                data: JSON.stringify({
                    uid: this.my.id,
                    ruid: this.user.id,
                    cmd: 'chat',
                    msg:this.msg
                })
            })
            this.msg = null
            this.iuputinfo=" "
        },
        // openkey() {
        //     if (this.flag) {
        //         this.flag = false
        //     } else {
        //         this.flag = true
        //     }
        // },
        focus(w) {
            this.target = 'msg-' + (this.chatmessagelist.length - 1)
            this.height = wx.getSystemInfoSync().windowHeight - (w.mp.detail.height) - 49
        },
        blur(e) {
            this.target = 'msg-' + (this.chatmessagelist.length - 1)
            this.height = wx.getSystemInfoSync().windowHeight - 49
        },
        input(e) {
           this.msg=e.mp.detail.value;
        },

    },
    mounted() {

        // setTimeout(() => {
        //     this.chatmessagelist.push(info)
        // }, 3000)

    },
    onLoad() {
        
        Object.assign(this.$data, this.$options.data())
        this.height = wx.getSystemInfoSync().windowHeight - 49

    },
    onShow() {
        
        this.user = JSON.parse(this.$root.$mp.query.info)
        console.log(this.user)
        this.my = wx.getStorageSync('user_info')
        wx.setNavigationBarTitle({
            title: this.user.nickname
        })
        // console.log(this.info)
        // console.log(this.my)
        this.height = wx.getSystemInfoSync().windowHeight - 49
        if (this.soket && this.soket.readyState == 0 || this.soket && this.soket.readyState == 1) return wx.sendSocketMessage({
            data: JSON.stringify({
                uid: this.my.id,
                ruid: this.user.id,
                cmd: 'login'
            })
        }), wx.onSocketMessage(res => {
            let info = {
                msg: JSON.parse(res.data).message,
                type: JSON.parse(res.data).type,
                msg_type: JSON.parse(res.data).msg_type,
            }
            this.chatmessagelist.push(info)
        })
        this.soket = wx.connectSocket({
            url: URL.chatUrl
        })
        wx.onSocketOpen((res) => {
            console.log("连接成功")
            wx.sendSocketMessage({
                data: JSON.stringify({
                    uid: this.my.id,
                    ruid: this.user.id,
                    cmd: 'login'
                })
            })
        })
        wx.onSocketMessage(res => {
            // console.log(JSON.parse(res.data))
            let info = {
                msg: JSON.parse(res.data).message,
                type: JSON.parse(res.data).type,
                msg_type: JSON.parse(res.data).msg_type,
            }
            this.chatmessagelist.push(info)
        })

    },
    onHide(){
        wx.closeSocket({
            url: URL.chatUrl,
            success:function(){
                console.log("断开连接")
            }
        })
    },
    onUnload(){
        wx.closeSocket({
            url: URL.chatUrl,
            success:function(){
                console.log("断开连接")
            }
        })
    },
}
</script>

<style lang="scss">
.container__ {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    justify-content: space-between;

    ._scroll-view {
        height: calc(100vh - 49px);
        // height: 300px;
        // padding: 5px 0;
        background-color: #F4F5F5;
        box-sizing: border-box;

        .messageitem {
            display: flex;
            justify-content: flex-start;
            // flex-flow: row-reverse;
            // margin: 10px 0;
            padding: 15px 15px 5px;

            .imgbox {
                height: 33px;
                width: 33px;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .mesinfo {
                word-break: break-all;
                word-wrap: break-word;
                margin: 0 10px;
                max-width: 259px;
                background-color: #fff;
                box-sizing: border-box;
                padding: 12px 15px;
                font-size: 14px;
                border-radius: 5px;
            }
        }
    }

    .sendmessagebox {
        height: 49px;
        width: 375px;
        background-color: #fff;
        // position: fixed;
        // bottom: 0;
        // left: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;
        overflow: hidden;

        input {
            width: 290px;
            height: 33px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(221, 221, 221, 1);
            border-radius: 17px;
            padding: 0 15px;
            font-size: 12px;
        }

        .yuyin {
            width: 209px;
            height: 33px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            font-size: 12px;
            border: 1px solid rgba(221, 221, 221, 1);
            border-radius: 17px;
        }

        // ._input {
        //     padding: 0;

        //     .van-cell {
        //         padding: 0;

        //         .inputclass {
        //             width: 209px;
        //             height: 33px;
        //             border: 1px solid rgba(221, 221, 221, 1);
        //             border-radius: 17px;
        //             padding: 0 15px;
        //             font-size: 12px;
        //         }
        //     }
        // }

        img {
            height: 20px;
            width: 23px;
        }
    }
}
</style>
